<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-20 14:19:14
 * @Description  : 装修VIP入口组件
-->
<template>
  <view class="deco-entry-vip" :style="[style]">
    <!-- 单独领出权益组件，避免装修数据变动造成组件重绘 -->
    <!-- 会员模块 权益组件 -->
    <deco-vip-privilege :data="data" :from="data" :page="page" :default-vip-level="defaultVipLevel" :read-only="readOnly"></deco-vip-privilege>
    <deco-wrap v-for="item in content" :key="item.deco.uuid" :name="item.name" :data="item" :from="data" :page="page"></deco-wrap>
    <!-- 单独处理空状态 -->
    <zm-empty :show="login && data.type === 'vipOne' && isVip" text="您已高于该等级，请享受至尊会员特权" icon-width="550rpx" icon-height="300rpx" margin="-240rpx auto 0 auto"></zm-empty>
  </view>
</template>

<script>
import Mitt from "@/decoration/utils/mitt"
import mixin from "@/decoration/mixins"
import DecoWrap from "@/decoration/components/common/deco-wrap/deco-wrap"
import { useStyle } from "@/utils/style"
import { mapGetters } from "vuex"
import { mitt } from "@/utils/mitt"
export default {
  name: "deco-entry-common",
  components: { DecoWrap },
  mixins: [mixin],
  props: {
    page: { type: String, default: "" },
    data: { type: [Object, null], default: () => ({}) },
    scrollTop: { type: Number, default: 0 },
    isTabbar: { type: Boolean, default: false },
    readOnly: { type: Boolean, default: false },
    defaultVipLevel: { type: [String, Number], default: 0 }
  },
  data() {
    return {
      mitt: new Mitt(),
      content: [],
      tabbarHeight: 0
    }
  },
  computed: {
    ...mapGetters(["userInfo", "login", "isVip"]),
    style() {
      const style = {}
      style.background = this.data.config?.background
      style["--deco-background-color"] = this.data.config?.background
      return useStyle(style)
    }
  },
  watch: {
    data: {
      handler(val) {
        this.handleGenContent(val)
      },
      deep: true,
      immediate: true
    },
    scrollTop: {
      handler(top) {
        this.scroll(top)
      }
    }
  },
  mounted() {
    this.onEvents()
  },
  methods: {
    // 单独处理过滤会员权益组件
    handleGenContent(data) {
      this.content = []
      this.$nextTick(() => {
        let content = []
        if (this.login && this.data.type === "vipOne" && this.isVip) {
          content = []
        } else {
          content = data?.content?.filter((item) => item.name !== "vip-privilege")
        }
        this.content = content || []
      })
    },
    scroll(top) {
      this.mitt.emit("scroll", top)
    },
    refresh() {
      this.mitt.emit("refresh")
    },
    onEvents() {
      mitt.on("deco-tabbar.height", (height) => {
        // 设置tabbar高度
        if (this.isTabbar) this.tabbarHeight = height
      })
      uni.$on("onReachBottom", () => {
        this.mitt.emit("onReachBottom")
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-entry-vip {
  width: 100vw;
  display: flex;
  position: relative;
  min-height: 100vh;
  flex-direction: column;
}
</style>
